$(function() {
  if (localStorage.getItem('cates')) {
    //取出数据,并且转换成对象数组，如果不是复杂类型无需转换
    var strcates = localStorage.getItem('cates')
    data = JSON.parse(strcates);
    //判断是否过期
    if (Date.now() - data.time > 999999 * 1000) {
      渲染();
    } else {
      $(".left>#wrapper").html(template("template1", data));
      left = new IScroll(".left>#wrapper");
      右边(0);
    }
  } else {
    渲染();
  }
  
  function 渲染() {
    $.ajax({
      type: "get",
      url: "categories",
      dataType: "json",
      success: function (res) {
        data = res.data;
        var jsondata = JSON.stringify(data);
        localStorage.setItem('cates', jsondata)
        $(".left>#wrapper").html(template("template1", data));
        left = new IScroll(".left>#wrapper");
        右边(0);
      }
    });
  }
  function 右边(index) {
    childrens = data[index].children;
    $(".right").html(template("template2", { data: childrens }));
    // 获取请求回来所有图片的长度,注册每张图片加载完成后进行长度--,当长度等于0的时候再初始化插件
    var time = $(".right img").length;
    $(".right img").on("load", function () {
      time--
      if (time == 0) {
        var myScroll = new IScroll(".right");
      }
    });
  }

  $(".left").on("tap", "li", function () {
    var index = $(this).index();
    $(this)
      .addClass("active")
      .siblings()
      .removeClass("active");
    // childrens = a[index].children;
    右边(index);
    left.scrollToElement(this)
  });

});

//1.设置AJAX请求数据
//2.声明全局变量a为空
//3.数据请求成功后把res.data赋值给全局变量a
//.4设置左边栏模板,把a数据传递过去模板生成结构,此时传递a只会是第一层数据被循环
//5.给每个左边栏的li注册委托点击事件,获取当前索引,同时使用排他法点击当前li高亮,其他还原,同时
//  声明一个全局变量childrens存储起 a[点击索引].二层数据 让他根据点击的li索引找到需要渲染的二层数据
//  同时调用封装好的右边栏的模板生成结构

//6.封装右边栏函数,同时声明一个全局变量存储起 a[点击索引].二层数据 把index变为参数用于在点击事件中调用
//  右边模板渲染时把点击事件中获取到的当前索引传入到调用的右边栏模板中，用于每次点击调用一次右边栏根据索引
//  生成索引的数据同时给与注册当所有图片加载完成后再初始化右边滑动事件，防止被初始化后图片还没加载完导致滑动
//  出现bug
//获取需要加载数据的长度
//判断本地缓存是否存在数据


